<!--
 * @Descripttion: 平台公告
 * @version: v1.0.0
 * @Author: 穆宏宇
 * @Date: 2021-01-26 13:09
 * @LastEditors: Administrator
 * @LastEditTime: 2021-01-26 13:09
-->
<template>
	<div class="row">
		<p class="title">应时物资</p>
		<!-- <p class="title">特色专区<span>更多 ></span></p> -->
		<div class="teseView">
			<button type="button" class="el-carousel__arrow el-carousel__arrow--left left"  @click="go(0)"><i class="el-icon-arrow-left"></i></button>
			<button type="button" class="el-carousel__arrow el-carousel__arrow--right right"  @click="go(1)"><i class="el-icon-arrow-right"></i></button>
			<div class="item" v-for="item in list" @click="goNav(item)">
				<p>{{item.characteristicName}}</p>
				<img :src="item.haracteristicImg" />
			</div>
		</div>
	</div>
</template>

<script>
	import {
		characteristicareaList
	} from "@/api/admin.api";
	

	export default {
		name: "common-sys-notice",
		components: {},
		props: {},
		data() {
			return {
				env: process.env.NODE_ENV === 'development' ? 'dev' : 'pro',
				tableData: [],
				searchData: {
					current: 1,
					size: 3,
					noticeType: 3
				},
				numDict:{},
				list:[
				
				]
			}
		},
		computed: {},
		watch: {},
		filters: {},
		created() {

		},
		mounted() {
			this.characteristicarea();
		},
		methods: {
			goNav(item){
				var ids = item.ids.replace(/'/g,'')
				this.$router.push({
					path: "/newSearch?characteristicId="+item.id + '&ids='+ids + '&show=0'
				})
			},
			characteristicarea(){
				var that = this;
				characteristicareaList().then(res => {
					that.list = res.rows;
				})
			},
			go(t){
				if(t == 0){
					var arr = this.list;
					var dict = arr[arr.length-1];
					this.list.pop();
					this.list.unshift(dict);
					
				}else if(t == 1){
					var arr = this.list;
					var dict = arr[0];
					this.list.shift();
					this.list.push(dict);
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	
	.floor{
		width: 100%;
		overflow: hidden;
		.row{
			width: 100%;
			overflow: hidden;
			.title{
				background-image: url(../../../assets/mall-images/dot.png);
				background-repeat: no-repeat;
				background-size: 30px 30px;
				text-indent: 40px;
				background-position: 0 5px;
				height: 40px;
				line-height: 40px;
				font-weight: bolder;
				font-size: 22px;
				margin: 20px 0px;
				span{
					float: right;
					margin-right: 10px;
					font-weight: normal;
					font-size: 14px;
					cursor: pointer;
				}
			}
		}
		.teseView{
			width: 100%;
			height: 232px;
			overflow: hidden;
			position: relative;
			.pre{
				position: absolute;
				left: 10px;
				top:100px;
			}
			.item{
				float: left;
				width: 393px;
				margin: 0 5px;
				background: #fff;
				padding: 15px 0px;
				cursor: pointer;
				border: 1px solid transparent;
				p{
					text-align: center;
					margin: 10px 0px;
				}
				img{
					width: 150px;
					height: 150px;
					display: block;
					margin: 10px auto;
				}
			}
			.item:nth-child(3){
				margin-left: 0px;
			}
			.item:nth-child(5){
				margin-right: 0px;
			}
			.next{
				position: absolute;
				right: 10px;
				top:100px;
			}
			.item:hover{
				border: 1px solid #FF4D4F;
			}
		}
		
	}
	
</style>
